<template>
    <div>
        <!-- <dv-loading v-if="dvLoading" class="loading-class">{{loadingText}}</dv-loading> -->
        <div class="container1">
            <div class="common-title-flex">
                <div class="common-title-div"></div>
                <div class="common-title-text">小程序管理查询条件</div>
            </div>
            <el-form ref="searchObj" :inline="true" :model="searchObj" size="mini" label-width="120px" style="margin-bottom:-10px;margin-top:10px;">
                    <el-form-item label="用户名称">
                        <el-input v-model="searchObj.nickName" placeholder="请输入用户名称" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称">
                        <el-input v-model="searchObj.roleName" placeholder="请输入角色名称" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="小程序用户">
                        <el-input v-model="searchObj.name" placeholder="请输入小程序用户" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="小程序ID">
                        <el-input v-model="searchObj.openId" placeholder="请输入小程序ID" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="用户电话">
                        <el-input v-model="searchObj.phone" placeholder="请输入用户电话" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="公司组织编码">
                        <el-input v-model="searchObj.orgCode" placeholder="请输入公司组织编码" clearable ></el-input>
                    </el-form-item>
                    <el-form-item label="公司名称">
                        <el-input v-model="searchObj.companyName" placeholder="请输入公司名称" clearable ></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left:2rem;">
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="query">查询</el-button>
                        <el-button @click="reset" size="mini" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
            </el-form>
        </div>
        <div class="container" style="margin-top:1rem;">
            <div class="common-list-class">
                <div style="display:flex;">
                    <div class="common-title-div"></div>
                    <div class="common-title-text">小程序管理查询列表</div>
                </div>
                <!-- <el-button type="primary" style="height:32px;" icon="el-icon-circle-plus-outline" @click="addPolice">添加</el-button> -->
            </div>
            <!-- 查询列表 -->
            <el-table :data="tableData" :row-style="rowStyle" :header-cell-style="tableHeaderColor"  size="mini" style="width: 100%;margin-top:10px;margin-bottom:10px;" max-height="550" border>
                <el-table-column prop="openId" label="小程序ID"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="name" label="小程序用户"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="phone" label="用户电话" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="orgCode" label="公司组织编码" show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="companyName" label="公司名称"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="girdId" label="网格编码"   show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="nickName" label="用户名称"   show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column prop="roleName" label="角色名称"  show-overflow-tooltip align="center">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-share" @click="editClick(scope.row)">绑定</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-error" v-if="scope.row.id" @click="jiebangClick(scope.row)">解绑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row type="flex" justify="end">
                    <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="pageSizes"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
                    </el-pagination>
            </el-row>
        </div>
        <!-- 新增警员 和修改警员-->
        <el-dialog title="绑定账号" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="newaddFlag" width="50%" :before-close="cancel" center>
            <div slot="title" class="header-title">
                <div class="header-title-div"></div>
                <div class="header-title-text">绑定账号</div>
            </div>
            <el-form ref="inputObj" :model="inputObj" label-width="120px" :rules="rules">
                <el-form-item label="后台账号" prop="bindRole">
                    <el-select v-model="inputObj.bindRole" filterable placeholder="请选择后台账号" style="width:100%;">
                        <el-option
                        v-for="item in bindRoleList"
                        :key="item.id"
                        :label="item.label"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" type="primary" @click="submit">提 交</el-button>
                <el-button size="mini" @click="cancel">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mixin from '@/mixin/mixin.js'; 
    export default {
        name: 'miniuser',
        mixins: [mixin],
        data(){
            const self = this;
            return {
                uploadHeader:{
                  token:'1244567788'  
                },
                uploadUrl:'https://jsonplaceholder.typicode.com/posts/',
                rules:{
                    bindRole: [
                        { required: true, message: '请选择后台账号', trigger: 'change' }
                    ]
                },
                inputObj:{
                    bindRole:''
                },
                companyList:[],
                statusObj:{
                    0:'已停用',
                    1:'已启用'
                },
                detailsFlag:false,
                isEditTitle:'',
                newaddFlag:false,
                pageSizes:[10, 15, 50, 100],
                pagesize:10,
                total:10,
                currentPage:1,
                tableData: [],
                searchObj:{
                    companyName:'',
                    orgCode:'',
                    status:'',
                    phone:'',
                    openId:'',
                    name:'',
                    roleName:'',
                    nickName:''
                },
                statusList:[{
                    value:'',
                    label:'全部',
                },{
                    value:'0',
                    label:'已停用',
                },{
                    value:'1',
                    label:'已启用',
                }],
                bindRoleList:[],
                serialId:'',
                typeCode:'',
                showFlag:false
            }
        },
        created(){
        //   let userinfo = JSON.parse(localStorage.getItem("userinfo"));
        //   console.log(userinfo)
        //   this.typeCode = userinfo.typeCode;
        //   if(this.typeCode == 'business' || this.typeCode == 'labour'){
        //       this.initCompanyList(this.typeCode);
        //   }
          this.initBindRoleList();
          this.query();
        },
        methods: {
            tableHeaderColor({row,column,rowIndex,columnIndex}){
                return 'background-color:#f5f5f5;color:#626262;'
            },
            rowStyle({ row, rowIndex}){
                let style1={};
                let style2={};
                if(rowIndex%2 == 0){
                    style1.background = '#ffffff';
                    return style1
                }else{
                    style2.background = '#f5f5f5';
                    return style2
                }
            },
            companyChange(value){
                let self = this;
                let params = {
                    orgCode:value,
                    roleId:this.inputObj.bindRole
                }
                this.showLoading();
                self.$axios({
                    method: 'get',
                    url: `/system/validateUser`,
                    headers:{
                        Authorization: this.requestToken   
                    },
                    params:params,
                    data:params
                }).then(res => {
                    this.hideLoading();
                    if(res.data.code == '20000'){
                        if(!res.data.data){
                            this.$message.error(res.data.message);
                            this.inputObj.company = '';
                            this.inputObj.companyCode = '';
                            this.$forceUpdate();
                            
                        }else{
                            this.inputObj.companyCode = value;
                            this.$forceUpdate();
                            
                        }
                    }else{
                        this.$message.error(res.data.message)
                    }
                }).catch(err => {
                    this.hideLoading();
                    this.$message.error(err)
                })
                
            },
            bindRoleChange(value){
                let obj = this.bindRoleList.find(item => {return item.id == value});
                let name = obj.roleName;
                this.inputObj.companyCode = '';
                this.inputObj.company = '';
                if(name.startsWith("劳务公司")){
                    this.showFlag = true;
                    this.initCompanyList('labour');
                }else if(name.startsWith("企业")){
                    this.showFlag = true;
                    this.initCompanyList('business');
                }else{
                    this.showFlag = false;
                    
                }
            },
            // 初始化劳务公司或企业
            initCompanyList(typeCode){
                let self = this;
                let params = {
                    typeCode:typeCode
                }
                this.$axios({
                    method: 'get',
                    url: `system/queryCompanyListByCondition`,
                    headers:{
                        Authorization:this.requestToken     
                    },
                    params:params
                }).then(res => {
                    if(res.data.code == '20000'){
                         this.companyList = res.data.data;
                    }else{
                        this.$message.error(res.data.message)
                    }
                }).catch( err => {
                    this.$message.error(err)
                })
            },
            // 初始化角色列表
            initBindRoleList(){
                let self = this;
                this.$axios({
                    method: 'get',
                    url: `system/queryBindUserList`,
                    headers:{
                        Authorization:this.requestToken     
                    }
                }).then(res => {
                    if(res.data.code == '20000'){
                        let dataList = res.data.data;
                        let data = [];
                        dataList.forEach((item)=>{
                            data.push({
                                id:item.id,
                                label:item.accountName+"-"+item.roleName
                            })
                        })
                         this.bindRoleList = data;
                    }else{
                        this.$message.error(res.data.message)
                    }
                }).catch( err => {
                    this.$message.error(err)
                })
            },
            // 新建确认和修改确认
            submit(){
                let self = this;
                this.$refs['inputObj'].validate((valid) => {
                    if (valid) {
                            let params = {
                                employeeId:self.serialId,
                                userId:self.inputObj.bindRole
                            }
                            self.showLoading();
                            self.$axios({
                                method: 'get',
                                url: `system/editAccount`,
                                headers:{
                                    Authorization:self.requestToken     
                                },
                                data: params,
                                params: params
                            }).then(res => {
                                self.hideLoading();
                                if(res.data.code == '20000'){
                                    self.newaddFlag = false;
                                    self.$message.success(res.data.message)
                                    self.inputObj = {
                                        bindRole:'',
                                    };
                                    this.$refs["inputObj"].resetFields();
                                    this.query();
                                }else{
                                    self.$message.error(res.data.message)
                                }
                            }).catch(err => {
                                self.hideLoading();
                                self.$message.error(err)
                            })
                        
                    } else {
                        return false;
                    }
                });
            },
            // 取消点击
            cancel(){
                this.newaddFlag = false;
                this.inputObj = {
                    account:'',
                    username:'',
                    userpwd:'',
                    bindRole:''
                };
                this.$refs["inputObj"].resetFields();
            },
            // 点击分页当前页多少数据
            handleSizeChange(val){
                this.pagesize = val;
                this.query();
            },
            // 点击分页页数
            handleCurrentChange(val){
                this.currentPage = val;
                this.query();
            },
            // 查询
            query() {
                let self = this;
                let params = {
                    pageNumber:this.currentPage,
                    pageSize:this.pagesize,
                    status:this.searchObj.status,
                    companyName:this.searchObj.companyName,
                    orgCode:this.searchObj.orgCode,
                    openId:this.searchObj.openId,
                    phone:this.searchObj.phone,
                    name:this.searchObj.name,
                    roleName:this.searchObj.roleName,
                    nickName:this.searchObj.nickName,
                }
                self.showLoading();
                self.$axios({
                    method: 'post',
                    url: `/system/queryEmployeeByPage`,
                    headers:{
                        Authorization:self.requestToken     
                    },
                    data: params,
                    params: params
                }).then(res => {
                    self.hideLoading();
                    if(res.data.code == '20000'){
                        let responseData = res.data.data;
                        self.tableData = responseData.list;
                        self.total = responseData.total;
                        self.pagesize = responseData.pageSize;
                        self.currentPage = responseData.pageNum;
                    }else{
                        self.$message.error(res.data.message)
                    }
                }).catch(err => {
                    self.hideLoading();
                    self.$message.error(err)
                })
            },
            //  重置
            reset(){
                this.searchObj = {
                    companyName:'',
                    orgCode:'',
                    status:'',
                    phone:'',
                    openId:'',
                    name:'',
                    roleName:'',
                    nickName:''
                }
                this.query();
            },
            // 重置密码
            refreshClick(row){
                let params = {
                    id:row.id
                }
                this.$confirm('请确认是否重置该用户密码?', '重置密码', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    }).then(() => {
                        this.showLoading();
                        this.$axios({
                            method: 'get',
                            url: `/system/resetPassword`,
                            headers:{
                                Authorization:this.requestToken     
                            },
                            params:params,
                            data:params
                        }).then(res => {
                            this.hideLoading();
                            if(res.data.code == '20000'){
                                this.$message.success('重置密码成功！');
                                this.query();
                            }else{
                                this.$message.error(res.data.message)
                            }
                        }).catch(err => {
                            this.hideLoading();
                            this.$message.error(err)
                        })
                    }).catch(() => {
                        console.log('取消重置密码')      
                    });
            },
            // 解绑
            jiebangClick(row){
                this.$confirm('请确认是否解绑该用户?', '解绑', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                    }).then(() => {
                        this.showLoading();
                        this.$axios({
                            method: 'get',
                            url: `/system/bindRemoveAccount/${row.employeeId}`,
                            headers:{
                                Authorization:this.requestToken     
                            },
                        }).then(res => {
                            this.hideLoading();
                            if(res.data.code == '20000'){
                                this.$message.success('解绑成功！');
                                this.query();
                            }else{
                                this.$message.error(res.data.message)
                            }
                        }).catch(err => {
                            this.hideLoading();
                            this.$message.error(err)
                        })
                    }).catch(() => {
                        console.log('取消解绑')         
                    });
            },
            // 点击启用
            startClick(row){
                this.$confirm('请确认是否启用该用户?', '启用', {
                    confirmButtonText: '是',
                    cancelButtonText: '否'
                }).then(() => {
                    this.showLoading();
                    this.$axios({
                        method: 'get',
                        url: `/system/enableOrDisableUser/${row.id}/1`,
                        headers:{
                            Authorization:this.requestToken     
                        },
                    }).then(res => {
                        this.hideLoading();
                        if(res.data.code == '20000'){
                            this.$message.success('启用成功！');
                            this.query();
                        }else{
                            this.$message.error(res.data.message)
                        }
                    }).catch(err => {
                        this.hideLoading();
                        this.$message.error(err)
                    })
                }).catch(() => {
                    console.log('取消启用')
                });
            },
            // 停用
            forbidClick(row){
                this.$confirm('请确认是否停用该用户?', '停用', {
                    confirmButtonText: '是',
                    cancelButtonText: '否',
                }).then(() => {
                    this.showLoading();
                    this.$axios({
                        method: 'get',
                        url: `/system/enableOrDisableUser/${row.id}/0`,
                        headers:{
                            Authorization:this.requestToken     
                        },
                    }).then(res => {
                        this.hideLoading();
                        if(res.data.code == '20000'){
                            this.$message.success('停用成功！');
                            this.query();
                        }else{
                            this.$message.error(res.data.message)
                        }
                    }).catch(err => {
                        this.hideLoading();
                        this.$message.error(err)
                    })
                }).catch(() => {
                    console.log('取消停用')
                });
            },
            // 新增
            addPolice(){
                this.newaddFlag = true;
                this.isEditTitle = '新增用户';
            },
            // 详情
            detailsClick(row){
                console.log(row)
                let self  = this;
                this.detailsFlag = true;
                this.detailsObj = {
                    username:row.username,
                    bindRole:row.bindRole,
                    status:row.status =='1'?'已启用':'已停用',
                    time:row.createTime,
                    person:row.createName
                }
            },
            // 详情关闭
            detailsClose(){
                this.detailsFlag = false;
            },
            // 修改
            editClick(row){
                this.newaddFlag = true;
                this.serialId = row.employeeId;
            }
        }
    }
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
  .common-title-flex{
      display:flex;
  }
  .common-title-div{
      width:3px;
      height:16px;
      background-color:#368af7;
      margin-top:2px;
  }
  .common-title-text{
      margin-left:4px;
      font-size: 14px;
  }
  .common-list-class{
      display:flex;
      justify-content:space-between;
      margin-top:-10px;
  }
  .upload-file >>> .el-upload--text{
      border:none;
      width: 100px;
      height: 36px;
  }
</style>